<template>
	<div style="height:100%;">
		<div class="contentBox">
			<wrap-head :isChangeBigWidth.sync='isChangeBigWidth' @toggleCollapseFunc="toggleCollapse"></wrap-head>
			<wrap-slide v-if="isShowLeft" ref="slide" :defaultActiveTest="defaultActiveTest" :defaultOpenMenuTest="defaultOpenMenuTest" :menuDataTest="menuDataTest" :isChangeBigWidth.sync='isChangeBigWidth' @test="test"></wrap-slide>
			<wrap-null v-if="!isShowLeft"></wrap-null>
			
			<div class="content" v-bind:class="classToggle" v-bind:style = "{minHeight : browserHeight + 'px'}">
				<router-view></router-view>
			</div>
		</div>
	</div>
</template>

<script>
import WrapHead from '@/components/public/Header';
import WrapSlide from '@/components/public/leftNav1';
import WrapNull from '@/components/public/leftNavNull';
//	import {vueEle} from '@/common/js/vueBus.js'

import router from '@/router/index';
export default {
  data() {
    return {
      data1: null,
      menuData: null,
      browserHeight: null,
      isChangeBigWidth: false,

      isShowLeft: false,
      menuDataTest: [],
      defaultActiveTest: '',
      menu: null,
      defaultOpenMenuTest: [],
      node: null
    };
  },
  components: {
    WrapHead,
    WrapSlide,
    WrapNull
  },
  computed: {
    classToggle: function() {
      return {
        isBig: this.isChangeBigWidth,
        isSmall: !this.isChangeBigWidth
      };
    }
  },
  methods: {
    test: function(value) {
      console.log(value, 'test');
    },
    iterateMenu: function(data) {
      console.log(data, 'data');
      if (data[0].childList && data[0].childList.length > 0) {
        this.menu = this.menu + '-' + data[0].id;
        console.log(this.menu, 'this.menu one');
        this.iterateMenu(data[0].childList);
      } else {
        this.menu = this.menu + '-' + data[0].id;
        console.log(this.menu, 'this.menu two');
        this.node = data[0];
      }
    },
	toggleCollapse(){
		console.log('func')
		this.$refs.slide.toggleCollapse('1');
	},	
  },
  created() {
    var self = this;
    //获取侧边菜单栏数据
    // this.Axios.Post(this.URL.getDeptparentBylist.url)
    // .then(function(res){
    this.Axios.Post(this.URL.leaderPortal.url, {
      type: 3
    }).then(res => {
      var result = res.data.datas.userHrMenuList;

      var target = this.$route.query.target;

      if (!target || location.hash.indexOf('/backStageManager?target') > -1) {
        if (!result) {
          return '';
        }

        if (result.length > 0) {
          if (result[0].childList && result[0].childList.length > 0) {
            this.menu = result[0].id;

            this.iterateMenu(result[0].childList);
            if (this.node.menuUrl.indexOf('?') > -1) {
              var url = this.node.menuUrl + '&target=' + this.menu;
            } else {
              var url = this.node.menuUrl + '?target=' + this.menu;
            }
            this.$router.push(url);

            this.defaultActiveTest = this.menu;
          } else {
            this.$router.push(result[0].menuUrl + '?target=' + result[0].id);

            this.defaultActiveTest = result[0].id + '';
          }
        }
      } else {
        this.menu = target;
        this.defaultActiveTest = target;
      }

      if (!this.menu || this.menu.indexOf('-') === -1) {
      } else {
        var menuList = this.menu.split('-');
        var result = [];

        for (var i = menuList.length; i > 0; i--) {
          menuList.splice(i - 1, 1);
          if (menuList.length > 0) {
            result.push(menuList.join('-'));
          }
        }
        this.defaultOpenMenuTest = result;
      }

      self.menuDataTest = res.data.datas.userHrMenuList;

      this.isShowLeft = true;
    });
  },
  beforeMount() {
    var self = this;
  },
  mounted() {
    this.browserHeight =
      Math.max(
        document.body['scrollHeight'],
        document.documentElement['scrollHeight']
      ) - 50;
  }
};
</script>

<style scoped>
/*section左侧部分样式*/
.contentBox {
  position: relative;
  min-height: -moz-calc(100%);
  min-height: -ms-calc(100%);
  min-height: -webkit-calc(100%);
  min-height: calc(100%);
}
/*.sidebar .fa {
		margin-right: 5px;
	}
	.sidebar .fa-circle{
		font-size: 12px;
	}
	.sidebar .topTitle {
		background-color: #eee;
		height: 56px;
		line-height: 56px;
		padding: 0 10px;
	}
	.sidebar .settings {
		color: #858885;
	}
	
	.sidebar .settings div {
		margin-bottom: 10px;
	}*/

.content {
  position: absolute;
  top: 50px;

  right: 0;
  background-color: #ecf0f5;
}
.contentBox .isSmall {
  left: 230px;
  transition: left 0.4s ease-in-out;
}
.contentBox .isBig {
  left: 50px;
  transition: left 0.4s ease-in-out;
}
.content > div {
  padding: 15px;
}
</style>
<style>
.contentBox .el-loading-mask {
  background-color: rgba(16, 16, 16, 0.5);
}
</style>
